<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="12" >
        <div class="grid-content bg-purple">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>待办事项</span>
            </div>
            <div class="body">
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column
                  prop="code"
                  label="单号"
                  width="160">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="标题">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="发起人"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="时间"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
            <el-card class="update-log">
            <div slot="header" class="clearfix">
              <span>更新日志</span>
            </div>
            <div class="body">
              <el-table :data="tableData1" border style="width: 100%">
                <el-table-column
                  prop="title"
                  label="标题">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="发布人"
                  width="160">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="时间"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        // 版本号
        version: '1.0.1',
        tableData: [{
          time: '2020-12-22 01:00',
          code: 'RW201222001',
          userName : '张三',
          title: '请假申请'
        },
        {
          time: '2020-12-22 02:00',
          code: 'RW201222002',
          userName : '李四',
          title: '休假申请'
        },
        {
          time: '2020-12-22 03:00',
          code: 'RW201222003',
          userName : '王五',
          title: '年假申请'
        }],
        tableData1: [{
          time: '2020-11-28 01:00',
          userName : '管理员',
          title: '2020年11月28日更新公告'
        },
        {
          time: '2020-12-11 02:00',
          userName : '管理员',
          title: '2020年12月11日更新公告'
        },
        {
          time: '2020-12-22 03:00',
          userName : '管理员',
          title: '2020年12月22日更新公告'
        }
        ]
      }
    },
    methods: {
      goTarget(href) {
        window.open(href, '_blank')
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin: 20px 20px 20px 20px;
    }

    ul {
      padding: 20;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>

